<template>
  <div class="page">
    <div class="login_box">
      <div class="title">
        <h2>Welcome</h2> 
      </div>
      <div class="login_form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginFormRulus">
          <el-form-item placeholder="手机号" prop="phoneNumber" >
            <el-input 
              v-model="loginForm.phoneNumber" 
              type="text"
              prefix-icon="el-icon-mobile"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item placeholder="密码" prop="password">
            <el-input 
              v-model="loginForm.password" 
              type="password"
              prefix-icon="el-icon-lock"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {validatePhoneNumber,validatePassword} from "@/utils/validate"

const cheackPhoneNumber = (rule, value, callback) => {
  if(validatePhoneNumber(value)){
    callback()
  }else{
    callback(new Error("请输入正确格式的手机号"))
  }
};

const checkPassword = (rule,value,callback)=>{
  if(validatePassword(value)){
    callback()
  }else{
    callback(new Error("密码强度过低。至少8位，且包含数字与字母"))
  }
};

export default {
  data() {
    return {
      loginForm:{
        phoneNumber:"18833889898",
        password:"rugvty321"
      },
      loginFormRulus:{
        phoneNumber:[{
          required:true,
          validator:cheackPhoneNumber,
          trigger:'blur'
        }],
        password:[{
          required:true,
          validator:checkPassword,
          trigger:'blur'
        }]
      },

    }
  },
  methods: {
    // 提交 loginForm
    submitForm(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          // console.log(this.loginForm);

          this.$API.staff.login(this.loginForm).then(res=>{
            // console.log(res);
            this.$store.dispatch("setUserInfo",res.data)

            this.$router.push({
              path:"/home"
            })
          })
        }else{
          console.log("error submit");
          return false
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
  .page{
    width:100vw;
    height:100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    .login_box{
      padding: 30px;
      width: 560px;
      height: 350px;
      margin: 0 auto;
      margin-top: 24vh;
      border: 1px solid #DCDFE6;
      border-radius: 8px;
      box-sizing: border-box;
      box-shadow: 10px 10px 5px #888888;
      .title{
        width: 500px;
        height: 50px;
        line-height: 50px;
        color: #409EFF;
        text-align: center;
        margin-bottom: 20px;
      }
      .el-button{
        width: 500px;
      }
    }
  }
</style>